<!DOCTYPE HTML>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0 minimal-ui"/>
    <meta name="apple-mobile-web-app-capable" content="yes"/>
    <meta name="apple-mobile-web-app-status-bar-style" content="black">

    <link rel="apple-touch-icon-precomposed" sizes="114x114" href="images/splash/splash-icon.png">
    <link rel="apple-touch-icon-precomposed" sizes="180x180" href="images/splash/splash-icon-big.png">
    <link rel="apple-touch-startup-image" href="images/splash/splash-screen.png"
          media="screen and (max-device-width: 320px)"/>
    <link rel="apple-touch-startup-image" href="images/splash/splash-screen@2x.png"
          media="(max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2)"/>
    <link rel="apple-touch-startup-image" href="images/splash/splash-screen-six.png" media="(device-width: 375px)">
    <link rel="apple-touch-startup-image" href="images/splash/splash-screen-six-plus.png" media="(device-width: 414px)">
    <link rel="apple-touch-startup-image" sizes="640x1096" href="images/splash/splash-screen@3x.png"/>
    <link rel="apple-touch-startup-image" sizes="1024x748" href="images/splash/splash-screen-ipad-landscape"
          media="screen and (min-device-width : 481px) and (max-device-width : 1024px) and (orientation : landscape)"/>
    <link rel="apple-touch-startup-image" sizes="768x1004" href="images/splash/splash-screen-ipad-portrait.png"
          media="screen and (min-device-width : 481px) and (max-device-width : 1024px) and (orientation : portrait)"/>
    <link rel="apple-touch-startup-image" sizes="1536x2008" href="images/splash/splash-screen-ipad-portrait-retina.png"
          media="(device-width: 768px)	and (orientation: portrait)	and (-webkit-device-pixel-ratio: 2)"/>
    <link rel="apple-touch-startup-image" sizes="1496x2048" href="images/splash/splash-screen-ipad-landscape-retina.png"
          media="(device-width: 768px)	and (orientation: landscape)	and (-webkit-device-pixel-ratio: 2)"/>

    <title>Login</title>
    <link href="styles/style.css" rel="stylesheet" type="text/css">
    <link href="styles/framework.css" rel="stylesheet" type="text/css">
    <link href="styles/owl.theme.css" rel="stylesheet" type="text/css">
    <link href="styles/swipebox.css" rel="stylesheet" type="text/css">
    <link href="styles/font-awesome.css" rel="stylesheet" type="text/css">
    <link href="styles/animate.css" rel="stylesheet" type="text/css">
    <link href="layui/css/layui.css" rel="stylesheet" type="text/css">


    <script type="text/javascript" src="scripts/jquery.js"></script>
    <script type="text/javascript" src="layui/layui.js"></script>
    <script type="text/javascript" src="scripts/jqueryui.js"></script>
    <script type="text/javascript" src="scripts/framework.plugins.js"></script>
    <script type="text/javascript" src="scripts/custom.js"></script>

</head>
<body>

<div id="preloader">
    <div id="status">
        <p class="center-text">
            Loading the content...
            <em>Loading depends on your connection speed!</em>
        </p>
    </div>
</div>

<div class="all-elements">
    <div class="snap-drawers">
        <!-- Left Sidebar -->
        <div class="snap-drawer snap-drawer-left">
            <a href="index.html"><i class="fa fa-home"></i>Home</a>
            <a href="page-features.html" class="selected-item"><i class="fa fa-cog"></i>Features</a>
            <a href="page-media.html"><i class="fa fa-picture-o"></i>Media</a>
            <a href="page-blog.html"><i class="fa fa-pencil"></i>Blog</a>
            <a href="contact.html"><i class="fa fa-envelope-o"></i>Contact</a>
            <a href="#"><i class="fa fa-facebook"></i>Like Us</a>
            <a href="#"><i class="fa fa-twitter"></i>Follow Us</a>
            <a href="#"><i class="fa fa-google-plus"></i>Follow us</a>
            <a href="#" class="show-share-bottom"><i class="fa fa-retweet"></i>Share</a>
            <a href="#" class="sidebar-close"><i class="fa fa-times"></i>Close</a>
        </div>
    </div>

    <div class="header">
        <!--        <a href="#" class="main-logo"></a>-->
        <a href="#" class="open-menu"><i class="fa fa-navicon"></i></a>
        <a href="#" class="open-call"><i class="fa fa-phone"></i></a>
        <a href="#" class="open-mail"><i class="fa fa-envelope-o"></i></a>
    </div>

    <a href="#" class="footer-ball"><i class="fa fa-navicon"></i></a>

    <!-- Page Content-->
    <div id="content" class="snap-content">
        <div class="header-clear"></div>

        <div class="login-page bg1">
            <div class="login-page-overlay"></div>
            <div class="login-page-wrapper">
                <!--                <a href="#" class="login-logo"></a>-->
                <p>
                    Please enter your login credentials bellow.
                </p>
                <form id="mysore" method="post" action="/login">
                    <input type="text" id="userphone"  class="login-username" name="phonenumber" placeholder="手机号">
                    <input type="password" class="login-password" name="password" placeholder="密码">
                    <div class="one-half">
                        <a href="#" class="button button-green" onclick="document.getElementById('mysore').submit();" >登陆</a>
                    </div>
                    <div class="one-half last-column">
                        <a href="pageapp-sigin.html" class="button button-blue">注册</a>
                    </div>
                </form>
                <div class="clear"></div>
                <a class="forgot" onclick="forgot()" href="#">忘记密码</a>

            </div>
        </div>

        <!-- Page Footer-->
        <div class="footer disabled">
            <p class="center-text">Copyright 2015. All rights reserved.</p>
            <div class="footer-socials half-bottom">
                <a href="#" class="footer-facebook"><i class="fa fa-facebook"></i></a>
                <a href="#" class="footer-twitter"><i class="fa fa-twitter"></i></a>
                <a href="#" class="footer-transparent"></a>
                <a href="#" class="footer-share show-share-bottom"><i class="fa fa-share-alt"></i></a>
                <a href="#" class="footer-up"><i class="fa fa-angle-up"></i></a>
            </div>
        </div>

    </div>

    <div class="share-bottom">
        <h3>Share Page</h3>
        <div class="share-socials-bottom">
            <a href="">
                <i class="fa fa-facebook facebook-color"></i>
                Facebook
            </a>
            <a href="">
                <i class="fa fa-twitter twitter-color"></i>
                Twitter
            </a>
            <a href="">
                <i class="fa fa-google-plus google-color"></i>
                Google
            </a>

            <a href="">
                <i class="fa fa-pinterest-p pinterest-color"></i>
                Pinterest
            </a>
            <a href="sms:">
                <i class="fa fa-comment-o sms-color"></i>
                Text
            </a>
            <a href="">
                <i class="fa fa-envelope-o mail-color"></i>
                Email
            </a>
        </div>
        <a href="#" class="close-share-bottom">Close</a>
    </div>
</div>

<script type="text/javascript">
    layui.use('layer', function () { //独立版的layer无需执行这一句
        var $ = layui.jquery, layer = layui.layer; //独立版的layer无需执行这一句
    });

    function forgot() {
        event.preventDefault();//使a自带的方法失效
        layer.open({
            type: 1
            ,
            title: false //不显示标题栏
            ,
            closeBtn: false
            ,
            area: '300px;'
            ,
            shade: 0.8
            ,
            id: 'LAY_layuipro' //设定一个id，防止重复弹出
            ,
            btn: ['确认', '取消']
            ,
            btnAlign: 'c'
            ,
            moveType: 1 //拖拽模式，0或者1
            ,
            content: '<form method="post" action="/change" id="repasswd"><div style="padding: 50px; line-height: 22px; background-color: #393D49; color: #fff; font-weight: 200;"><br><input style="height: 25px" id="user-phone" name="phonenumber" placeholder="手机号" type="tel"><br><br><input style="height: 25px" type="password" placeholder="新密码" name="password"><br><br><input style="height: 25px" type="text" placeholder="验证码" name="key"><br><br><button onclick="send()" class="layui-btn layui-btn-primary layui-btn-sm" type="button">获取验证码</button><br></div></form>'
            ,
            yes: function (index) {
                document.getElementById('repasswd').submit();
                layer.close(index);//这块是点击确定关闭这个弹出层
            }
            ,
            cancel: function (index) {
                layer.close(index)
            }
        });
    }


    function send() {
        const number = document.getElementById("user-phone").value;
        jQuery.ajax({
            url: "/send?phonenumber="+number,
            type: "post",
            dataType: "json",
            data: {
                data: number
            },
            success: function (result) {
                if (result.code == 200) {
                    alert("发送成功")
                } else {
                    alert("发送失败")
                }
            }
        });
    }
</script>
</body>

